<template>
  <div class="">
    <div style="width:100%;height:60px;" v-if="isFixed"></div>
    <div class="head" :class="isFixed ? 'isfixed' : ''">
      <div class="zhong">
        <div class="head-left">
          <img class="divdw_img" src="../assets/bbcz/zydw01.png" alt="" />
          <span class="divdw_span">{{ location }}</span>
        </div>
        <div class="list">
          <div><router-link to="/">首页</router-link></div>
          <div @click="toRouter(1)" style="margin-left: 32px">我要发布</div>
          <div @click="toRouter(2)" style="margin-left: 32px">店铺认证</div>
          <div style="margin-left: 32px" @click="toRouter(3)">
            销售顾问认证
          </div>
          <div style="margin-right: 40px;margin-left:15px">下载APP</div>
          <img class="div5" v-if="!loginstate" src="../assets/tou.png" />
          <img class="div5" v-if="loginstate" :src="user.image ? user.image : '../assets/tou.png'" />

          <template v-if="!loginstate">
            <span style="margin-left: 5px;margin-right: 10px; cursor: pointer" @click="login">登录</span>
            <span style="cursor: pointer" @click="tou_zhuce">注册</span>
          </template>
          <template v-else>
            <span style="margin-right: 10px; cursor: pointer" @click="toUser()">我的</span>
            <div @click="loginout">退出</div>
          </template>
        </div>
      </div>
    </div>

    <login ref="login" @succer="loginsucces"></login>
    <div v-show="issuestate" style="
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #333333;
        z-index: 9999999;
        opacity: 0.9;
      ">
      <div style="
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 14%;
        ">
        <div style="display: flex; width: 20%; justify-content: space-between">
          <!-- <div
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              cursor: pointer;
            "
            @click="issue(1)"
          >
            <img src="../assets/cs.png" />
            <div style="color: #ffffff; font-size: 30px; margin-top: 24px">
              出售
            </div>
          </div> -->
          <div style="
              display: flex;
              flex-direction: column;
              align-items: center;
              cursor: pointer;
            " @click="issue(2)">
            <img src="../assets/cz.png" />
            <div style="color: #ffffff; font-size: 30px; margin-top: 24px">
              出租
            </div>
          </div>
          <div style="
              display: flex;
              flex-direction: column;
              align-items: center;
              cursor: pointer;
            " @click="issue(11)">
            <img src="../assets/cz.png" />
            <div style="color: #ffffff; font-size: 30px; margin-top: 24px">
              认证汽车销售顾问
            </div>
          </div>
          <div style="
              display: flex;
              flex-direction: column;
              align-items: center;
              cursor: pointer;
            " @click="issue(12)">
            <img src="../assets/cz.png" />
            <div style="color: #ffffff; font-size: 30px; margin-top: 24px">
              认证汽车店铺
            </div>
          </div>
          <div style="
              display: flex;
              flex-direction: column;
              align-items: center;
              cursor: pointer;
            " @click="issue(13)">
            <img src="../assets/cz.png" />
            <div style="color: #ffffff; font-size: 30px; margin-top: 24px">
              发布帮友圈
            </div>
          </div>
          <!-- <div style="display: flex;flex-direction: column;align-items: center;cursor: pointer;" @click="issue(3)">
						<img src="../assets/cs.png" />
						<div style="color: #FFFFFF;font-size: 30px;margin-top: 24px;">卖车</div>
					</div>
					<div style="display: flex;flex-direction: column;align-items: center;cursor: pointer;" @click="issue(4)">
						<img src="../assets/cz.png" />
						<div style="color: #FFFFFF;font-size: 30px;margin-top: 24px;">在售车系</div>
					</div>
					<div style="display: flex;flex-direction: column;align-items: center;cursor: pointer;" @click="issue(5)">
						<img src="../assets/cz.png" />
						<div style="color: #FFFFFF;font-size: 30px;margin-top: 24px;">服务项目</div>
					</div>
					<div style="display: flex;flex-direction: column;align-items: center;cursor: pointer;" @click="issue(6)">
						<img src="../assets/cz.png" />
						<div style="color: #FFFFFF;font-size: 30px;margin-top: 24px;">帮友圈</div>
					</div> -->
        </div>
        <i class="el-icon-circle-close" style="font-size: 30px; margin-top: 74px; cursor: pointer"
          @click="Move(), (issuestate = false)"></i>
      </div>
    </div>
  </div>
</template>
<script>
import login from "./login.vue";
export default {
  props: {
    isFixed: {
      type: Boolean,
      default: false
    }
  },
  components: {
    login
  },
  data() {
    return {
      loginstate: false,
      user: {},
      issuestate: false,
      location: ""
    };
  },
  created() {
    //判断是否登录
    this.getUser();
    this.initMap();
  },
  filters: {
    hidePhone(phone) {
      return phone.substring(0, 3) + "***" + phone.substring(phone.length - 2);
    }
  },
  methods: {
    // 获取定位
    initMap() {
      let data = {
        key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
        output: "jsonp"
      };
      this.$jsonp("https://apis.map.qq.com/ws/location/v1/ip", data).then(
        data => {
          this.location = data.result.ad_info.city;
        }
      );
    },
    //停止页面滚动
    stopMove() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      document.addEventListener("touchmove", m, { passive: false }); //禁止页面滑动
    },
    //开启页面滚动
    Move() {
      let m = function (e) {
        e.preventDefault();
      };
      document.body.style.overflow = ""; //出现滚动条
      document.removeEventListener("touchmove", m, { passive: true });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
        console.log("用户信息");
        console.log(user);
      } else {
        this.loginstate = false;
      }
    },
    login() {
      this.$refs.login.login();
    },
    tou_zhuce() {
      this.$refs.login.tou_zhuce();
    },
    loginsucces(e) {
      if (e) {
        this.getUser();
      }
    },
    loginout() {
      localStorage.removeItem("userInfo");
      localStorage.removeItem("contrastIdList");
      localStorage.removeItem("confirm");
      this.getUser();
      this.$router.push("/");
    },
    toUser() {
      if (this.loginstate) {
        //查询最新用户信息
        this.$getHttp("/mob/login/getUserInfoByPhone", {
          phone: JSON.parse(localStorage.getItem("userInfo")).phone
        }).then(data => {
          if (data.code == 200) {
            localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
          }
        });
        this.openUrl("/my/bbcz/bbczpersonal");
      } else {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    toRouter(type) {
      this.issuestate = true;
      return;
      if (this.loginstate) {
        let routeLink = "";
        switch (type) {
          case 1:
            this.issuestate = true;
            this.stopMove();
            break;
          case 2:
            routeLink = this.$router.resolve({
              path: "/index/merchantAttestation?id=" + this.user.id
            });
            window.open(routeLink.href, "_blank");
            // this.$router.push({
            // 	path:"/index/merchantAttestation",
            // 	query:{
            // 		id:this.user.id
            // 	}
            // })
            break;
          case 3:
            routeLink = this.$router.resolve({
              path: "/index/brokerAttestation?id=" + this.user.id
            });
            window.open(routeLink.href, "_blank");
            // this.$router.push({
            // 	path:"/index/brokerAttestation",
            // 	query:{
            // 		id:this.user.id
            // 	}
            // })
            break;
        }
      } else {
        this.$message({
          message: "请先登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    issue(type) {
      if (type == 1) {
        let routeLink = this.$router.resolve({
          path: "/release/sell"
        });
        window.open(routeLink.href, "_blank");
      } else if (type == 2) {
        let routeLink = this.$router.resolve({
          path: "/release/rent"
        });
        window.open(routeLink.href, "_blank");
      } else if (type == 3) {
        let routeLink = this.$router.resolve({
          path: "/my/releaseOptions"
        });
        window.open(routeLink.href, "_blank");
      } else if (type == 4) {
        let routeLink = this.$router.resolve({
          path: "/release/sellCar"
        });
        window.open(routeLink.href, "_blank");
      } else if (type == 5) {
        let routeLink = this.$router.resolve({
          path: "/release/servicesAvailable"
        });
        window.open(routeLink.href, "_blank");
      } else if (type == 6) {
        let routeLink = this.$router.resolve({
          path: "/release/releaseCircleFriends"
        });
        window.open(routeLink.href, "_blank");
      } else if (type == 11) {
        let routeLink = this.$router.resolve({
          path: "/release/certificationBroker"
        });
        window.open(routeLink.href, "_blank");
      } else if (type == 12) {
        let routeLink = this.$router.resolve({
          path: "/release/peakfirerz"
        });
        window.open(routeLink.href, "_blank");
      } else if (type == 13) {
        let routeLink = this.$router.resolve({
          path: "/release/releaseCircleFriends"
        });
        window.open(routeLink.href, "_blank");
      }
    }
  }
};
</script>
<style lang="less" scoped>
.isfixed {
  z-index: 99;
  position: fixed !important;
  top: 0;
  left: 0;
}

.div5 {
  width: 26px;
  height: 26px;
  cursor: pointer;
  border-radius: 26px;
  vertical-align: top;
}

.head {
  width: 100%;
  height: 60px;
  color: #ffffff;
  background-color: #666;

  .zhong {
    position: relative;
    right: 0;
    width: 1200px;
    margin-left: 50%;
    transform: translateX(-50%);

    .head-left {
      position: absolute;
      left: 0;
      top: 0;
      height: 40px;
      background-color: rgba(51, 51, 51, 0.46);
      border-radius: 25px;
      border: 1px solid #ffffff;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .divdw_img {
        width: 28px;
        height: 28px;
        margin-left: 12px;
      }

      .divdw_span {
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
        margin-right: 10px;
      }
    }

    .list {
      position: absolute;
      top: 18px;
      right: 0;
      display: flex;
      align-items: center;

      span {
        font-size: 18px;
      }

      div {
        display: inline-block;
        font-size: 18px;
        margin-left: 32px;
        cursor: pointer;

        img {
          width: 22px;
          height: 22px;
        }

        span {
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
